<template>
<div>
  <nav aria-label="breadcrumb">
    <ol class="breadcrumb">
      <li class="breadcrumb-item">
        <router-link to="/" class="text-decoration-none">首页</router-link>
      </li>
      <li class="breadcrumb-item active">
        <router-link to="/about" class="text-decoration-none">用户</router-link>
      </li>
    </ol>
  </nav>
  <div class="row">
    <div class="col-3">
      <h1>用户列表</h1>
      <div class="list-group">
        <router-link v-for="n in 5" :key="n" :to="`/about/${n}`" class="list-group-item list-group-item-action" :class="{active:n===currentId}" :aria-current="n===currentId">用户{{n}}</router-link>
      </div>
    </div>
    <div class="col-9">
      <router-view/>
    </div>
  </div>
</div>
</template>
<script setup>
import {ref,watch,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted,onActivated,onDeactivated} from "vue"
import {useRoute} from "vue-router"
const route=useRoute()
const currentId=ref(null)
watch(()=>route.params.id,(newVal)=>{
  currentId.value=newVal
})
onBeforeMount(()=>{
  console.log("Users onBeforeMount")
})
onMounted(()=>{
  console.log("Users onMounted")
})
onBeforeUpdate(()=>{
  console.log("Users onBeforeUpdate")
})
onUpdated(()=>{
  console.log("Users onUpdated")
})
onBeforeUnmount(()=>{
  console.log("Users onBeforeUnmount")
})
onUnmounted(()=>{
  console.log("Users onUnmounted")
})
onActivated(()=>{
  console.log("Users onActivated")
})
onDeactivated(()=>{
  console.log("Users onDeactivated")
})
</script>